<template>
	<view class="withdraw">
		<view class="address-wrap">
			<view class="item">
				<view class="flex">
					<text class="content">Recipient</text>
					<input type="text"  placeholder="Recipient" v-model="postdata.consignee" />					
				</view>
			</view>
			<view class="item"><view class="flex"><text class="content">mobile</text><input type="text"  placeholder="Recipient" v-model="postdata.mobile"/></view></view>
			<!--这地方要让用户自行输入，而不是选择
			<view class="item"  @tap="openAddres"><view><text class="content">省市区/县</text>{{addresslabel}}</view>
				<image src="../../../../static/images/personal/add-icon.png" class="icon"></image>
			</view>
			-->
			<view class="item"><input type="text"  placeholder="detail address" v-model="postdata.address" /></view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
		<view class="btn" @click="save">save</view>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js'
	import provinceData from '@/components/simple-address/city-data/province.js';
	import cityData from '@/components/simple-address/city-data/city.js';
	import areaData from '@/components/simple-address/city-data/area.js';
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
		
	    export default {
	        data() {
	            return {
					//默认选中index
	                cityPickerValueDefault: [0, 0, 1],
					//省-市-区
					addresslabel:'',
					postdata:{
						//详细地址
						address:'',
						//手机号
						mobile:'',
						//收件人
						consignee:'',
						//省
						province:'',
						//市
						city:'',
						//区
						district:'',
						//label:''
					},
				}
					
	        },
	        components: {
	            simpleAddress
	        },
			onShow() {				
				//获取已保存的地址
				fetch.request('/index/mobile/myaddress','','GET').then(res=>{
					let {data} = res
					for(let i in data){
						if(this.postdata.hasOwnProperty(i)){
							this.postdata[i] = data[i]
						}
					}
					this.initDefaultIndex()
				})
			},
	        methods: {
				initDefaultIndex(){
					for(let i=0;i<provinceData.length;i++){
						if(this.postdata.province == provinceData[i].value){
							this.cityPickerValueDefault[0] = i
							this.addresslabel = provinceData[i].label +'-'
						}
					}
					for(let i=0;i<cityData[this.cityPickerValueDefault[0]].length;i++){
						if(this.postdata.city == cityData[this.cityPickerValueDefault[0]][i].value){
							this.cityPickerValueDefault[1] = i
							this.addresslabel = this.addresslabel+cityData[this.cityPickerValueDefault[0]][i].label+'-'
						}
					}           
					for(let i=0;i<areaData[this.cityPickerValueDefault[0]][this.cityPickerValueDefault[1]].length;i++){
						if(this.postdata.district == areaData[this.cityPickerValueDefault[0]][this.cityPickerValueDefault[1]][i].value){
							this.cityPickerValueDefault[2] = i
							this.addresslabel = this.addresslabel+areaData[this.cityPickerValueDefault[0]][this.cityPickerValueDefault[1]][i].label
						}
					}
					this.$refs.simpleAddress.changeIndex(this.cityPickerValueDefault)
					console.log(this.cityPickerValueDefault)
				},
				save(){
					fetch.request('/index/mobile/myaddress',this.postdata,'POST').then(res=>{
						fetch.toast(res.msg)
					})
				},
	            openAddres() {
	                this.$refs.simpleAddress.open();
	            },
	            onConfirm(e) {
					this.addresslabel = e.label
					this.postdata.province = e.provinceCode
					this.postdata.city = e.cityCode
					this.postdata.district = e.areaCode
					// this.postdata.label = e.label
					console.log(e)
	            }
	
	        }
	    }
</script>

<style lang="less" scoped>
	page,.withdraw{
		width: 100%;
		min-height: 100%;		
	}
	.flex{
		display: flex;
	}
	.address-wrap{
		margin: 30rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
	}
	.item{
		padding: 30rpx 50rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #F4F4F4;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.content{
			 width:200rpx;
			 display: inline-block;
		}
		.icon{
			width: 26rpx;
			height: 34rpx;
			vertical-align: middle;
		}
	}
	.btn{
		color: #fff;
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 80rpx;
		height: 80rpx;
		background: #F53D46;
	}
</style>
